<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebSocket Logger</title>
  <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
  <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
  <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<h1>指定监听日志文件的日志</h1>
<button onclick="openSocket()">开启日志</button><button onclick="closeSocket()">关闭日志</button>
<div id="filelog-container" style="height: 550px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
  <div></div>
</div>
</body>
<script>
  var stompClient = null;
  var url = window.location.host;
  $(document).ready(function() {openSocket();});
  function openSocket() {
    if(stompClient==null){
      console.log(url);
      var socket = new SockJS('http://'+url+'/ws?token=kl');
      stompClient = Stomp.over(socket);
      stompClient.connect({token:"kl"}, function(frame) {
        stompClient.subscribe('/topic/pullFileLogger', function(event) {
          var content=event.body;
          $("#filelog-container div").append(content).append("<br/>");
          $("#filelog-container").scrollTop($("#filelog-container div").height() - $("#filelog-container").height());
        },{
          token:"kltoen"
        });
      });
    }
  }
  function closeSocket() {
    if (stompClient != null) {
      stompClient.disconnect();
      stompClient=null;
    }
  }
</script>
</body>
</html>